<template>
  <render v-bind="props"></render>
</template>
<script lang="ts" setup>
import { h } from 'vue'
import WordNode from './WordNode.vue'
import RichNode from './RichNode.vue'
import { TextNode } from '../util'
type PROPS = {
  style?: Record<string, string>
  class?: string
  tag: string
  nodes: TextNode[]
}
const props = withDefaults(defineProps<PROPS>(), {
  style: () => ({}),
  tag: 'p',
  nodes: () => [],
})
const render = (props: PROPS) => {
  const { style, tag, nodes } = props
  // 还需判断其他类型
  return h(
    tag,
    { style },
    nodes?.map((item: any) => {
      switch (item.type) {
        case 'TEXT_NODE_TYPE_WORD':
          return h(WordNode, { data: item.word })
        case 'TEXT_NODE_TYPE_RICH':
          return h(RichNode, { data: item.rich })
      }
    })
  )
}
</script>
<style lang="scss" scoped></style>
